<template>
	<view class="container couponDetail-container">
		<view class="order-type">
			<view class="page-title">{{pageData.name || '-'}}</view>
			<view class="coupon-price">
				<text class="coupon-title">满</text>
				<text class="coupon-title-num">{{$toYuan(pageData.minAmount) || 0}}</text>
				<text class="coupon-title">立减</text>
				<text class="coupon-title-num">{{$toYuan(pageData.discountAmount) || 0}}</text>
			</view>
			<view class="coupon-time">活动时间：{{pageData.startTime}} 至 {{pageData.endTime}}</view>
			<view class="coupon-bottom">
				<view class="bottom-list">活动介绍：{{pageData.activityDescription}}</view>
				<view class="bottom-list" v-if="pageData.applicableGoods.length>0">
					限制条件：
					<text v-for="(item,idx) in pageData.applicableGoods" :key="item.id">{{idx===0?'':'、'}}{{item.name}}</text>
					可用
				</view>
				<view class="bottom-list" v-if="pageData.applicableCategories.length>0">
					限制条件： 
					<text v-for="(item,idx) in pageData.applicableCategories" :key="item.id">{{idx===0?'':'、'}}{{item.name}}</text>
					可用
				</view>
			</view>

		</view>

	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app"
	import { hideLoading, showLoading } from "../../common/util";
	import api from "../../common/api";
	let pageId = ''
	onLoad((options) => {
		pageId = options.id;
	})
	onMounted(async () => {
		getOrderDetail()
	})
	const pageData = ref<any>({})
	const getOrderDetail = async () => {
		showLoading()
		try {
			const res = await api.findCouponDetail(pageId)
			pageData.value = res.data || {}
		} finally {
			hideLoading()
		}
	}
</script>

<style lang="scss">
	.couponDetail-container {
		padding: 20rpx;

		.order-type {
			padding: 20rpx;
			border-radius: 10rpx;
			background: linear-gradient(180deg, #FBE2D0 0%, #FF8D1E 100%);
		}

		.page-title {
			font-size: 38rpx;
			font-weight: bold;
			text-align: center;
			color: #FF8D1E;
		}

		.coupon-price {
			font-size: 50rpx;
			font-weight: bold;
			color: #1e1e1e;
			font-style: italic;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 20rpx 0;
		}

		.coupon-title-num {
			color: #fc4a40;
			margin: 0 20rpx;
			font-size: 60rpx;
		}

		.coupon-time {
			text-align: center;
			font-size: 28rpx;
			color: #1e1e1e;
			

		}

		.coupon-bottom {
			font-size: 26rpx;
			color: #fff;
			padding: 0 20rpx;
			margin-top: 50rpx;
		}

		.bottom-list {
			margin-bottom: 10rpx;
		}
	}
</style>